<template>

  <div class="select-container">
    <el-select v-model="sortValue1" placeholder="综合排序" @change="handleSortChange('sortValue1', $event)">
      <el-option label="综合排序" value=""/>
      <el-option label="回答次数" value="response_count"/>
      <el-option label="评分" value="score"/>
      <el-option label="价格" value="price"/>
    </el-select>
    <el-select v-model="sortValue2" placeholder="全国" @change="handleSortChange('sortValue2', $event)">
      <el-option label="全国" value="4"/>
      <el-option label="北京" value="5"/>
      <el-option label="上海" value="6"/>
    </el-select>
    <el-select v-model="sortValue3" placeholder="筛选" @change="handleSortChange('sortValue3', $event)">
      <el-option label="筛选1" value="7"/>
      <el-option label="筛选2" value="8"/>
      <el-option label="筛选3" value="9"/>
    </el-select>
  </div>

  <div v-for="(doctor, index) in doctor" :key="'doctor-' + index" class="doctor-card">
    <div class="doctor-content">
      <div class="doctor-header">
        <div class="doctor-image-container">
          <img :src="'http://localhost:8000/' + doctor.avatar" alt="" class="doctor-avatar"/>
        </div>
        <div class="doctor-name-hospital">
          <h4>{{ doctor.name }} - {{ doctor.hospital }}</h4>
        </div>
      </div>
      <div class="doctor-info">
        <div class="info-sections">
          <div class="section-left">
            <p>科室：{{ doctor.department }}</p>
            <p>简介：{{ doctor.description }}</p>
            <p>职称：{{ doctor.title }}</p>
          </div>
          <div class="section-middle">
            <p>回答次数：{{ doctor.response_count }}</p>
            <p>评分：{{ doctor.score }}</p>
          </div>
          <div class="section-right">
            <p>价格：{{ doctor.price }}</p>
            <el-button type="primary" @click="showDetail(doctor)">问医生</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import axios from "axios";
import router from "../router/index.js";

const route = useRoute();
const doctor = ref([]);
const id = route.query.id;
const name = route.query.name;
console.log(id);

const sortValue1 = ref('');
const sortValue2 = ref('');
const sortValue3 = ref('');


const handleSortChange = (field, value) => {
  console.log(`${field} changed to ${value}`);
  // 在这里可以处理选中的值，例如进行排序或过滤操作
  console.log(value);
  axios.get(`http://localhost:8000/app/doctor_by_department/?ordering=-${value}`, {params: {id: id}})
      .then(res => {
        console.log(res.data);
        doctor.value = res.data;
      });

};

const showDetail = (doctor) => {
  console.log(doctor)
  router.push( {name: 'three-ask-doctor', query: {doctor: JSON.stringify(doctor)}})
}

onMounted(() => {
  // 在页面加载时获取医生信息
  handleSortChange('sortValue1', '')
});


</script>

<style scoped>
.select-container {
  display: flex;
  gap: 10px; /* 间距可以根据需要调整 */
  margin-bottom: 20px;
}

/* 卡片样式 */
.doctor-card, .hospital-card, .medicine-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.doctor-card:hover, .hospital-card:hover, .medicine-card:hover {
  transform: translateY(-5px);
}

/* 内容样式 */
.doctor-content, .hospital-content, .medicine-content {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
}

/* 头部样式 */
.doctor-header, .hospital-header, .medicine-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}

.doctor-image-container {
  margin-bottom: 10px;
}

.doctor-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.doctor-name-hospital, .hospital-header h4, .medicine-header h4 {
  text-align: center;
  margin-bottom: 10px;
  font-size: 1.2em;
  color: #333;
}

/* 信息样式 */
.doctor-info, .hospital-info, .medicine-info {
  flex: 1;
  margin-top: 10px;
  line-height: 1.6;
  text-align: left;
}

.info-sections {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.section-left, .section-middle, .section-right {
  flex: 1;
  margin-right: 10px;
  text-align: center;
}

.section-right {
  margin-right: 15px;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
</style>
